<template>
	<view>
		<view class="couponBox">
			<view class="couponInfo">
				<!-- 左边 -->
				<view class="flex-colum-center leftContent">
					<!-- 折扣 -->
					<text v-if="couponInfo.couponCategoryStatus == 2" class="lefttext0" >{{couponInfo.preferentialMoney}}</text>
					<!-- 立减|满减 -->
					<text v-else class="lefttext1" >{{couponInfo.preferentialMoney}}</text>
					<text class="lefttext2">{{couponInfo.bizType + couponInfo.couponCategory}}券</text>
					<!-- <text class="lefttext3">{{couponInfo.specifyModel + couponInfo.couponInfo}}</text> -->
				</view>

				<!-- 中间 -->
				<view class="flex-colum-start centerContent">
					<text class="centertext1">{{couponInfo.couponName}}</text>
					<!-- <text class="centertext2">领取后{{couponInfo.expiredDay}}天有效</text> -->
					<text class="centertext2">{{couponInfo.receiveTime}}至{{couponInfo.couponValidity}}</text>
					<text class="centertext2" style="font-size: 20rpx;">{{couponInfo.couponMemberType==1 ? '门店通用' : '部分门店可用'}}</text>
					<view class="descContent" @click="descClick">
						<text class="desc-title">使用说明</text>
						<image v-if="showDesc==false" src="https://qykh.shopec.com.cn/image-server/dz/desc_open.png" mode=""></image>
						<image v-else src="https://qykh.shopec.com.cn/image-server/dz/desc_close.png" mode=""></image>
					</view>
				</view>

				<!-- 右边 -->
				<view class="rightContent">
					<!-- <text class="type">{{couponInfo.specifyModel}}</text> -->
					
					<block v-if="viewType == 0">
						<text class="bizType" v-if="couponInfo.getStatus == 1" @click="clickReceiveCoupon">免费领取</text>
						<text class="bizType" v-else @click="useCoupon">立即使用</text>
					</block>
					<block v-else-if="viewType == 1">
						<text class="bizType" @click="useCoupon">立即使用</text>
					</block>
					<block v-else-if="viewType == 2">
						<text v-if="memberCouponStatus == 1" class="memberCouponStatus">已使用</text>
						<text v-else class="memberCouponStatus">已过期</text>
					</block>
					
				</view>


			</view>

		</view>
		<view v-if="showDesc==true" class="descBox">
               <text style="margin: 30rpx; 100rpx 0 10rpx">使用说明:</text>
			   <view class="descInfo">
			   	 <text style="margin-bottom: 20rpx;">1.有效期内使用</text>
				 <text style="margin-bottom: 20rpx;" v-if="couponInfo.modelName.length > 0">2.车型为{{'"'+couponInfo.modelName+'"'}}可用</text>
				 <text style="margin-bottom: 20rpx;" v-else>2.全部车型可用</text>
				 <text >3.适用门店:{{couponInfo.couponMemberType == 2 ?  couponInfo.storeName : '全部门店'}}</text>
			   </view>
		</view>

	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				showDesc: false,
				
			}
		},
		props: {
			// 优惠券实体
            couponInfo:{
				type : Object,
				default() {
				  return {}
				}
			},
			// 页面类型 0:优惠券专区 1:我的优惠券 2.使用记录
			viewType: {
				type : Number | String,
				default : 0
			},
			//优惠券状态
			memberCouponStatus: {
				type : Number | String,
				default : 1
			}
		},
		mounted() {

		},
		methods: {
			descClick() {
				this.showDesc = !this.showDesc;
			},
			clickReceiveCoupon() {
				this.$emit('getCoupon', this.couponInfo);
			},
			useCoupon() {
			   uni.switchTab({
			   	url:'/pages/home/home'
			   })
			}
		}

	}
</script>

<style lang="scss" scoped>
	.flex-colum-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flex-colum-start {
		display: flex;
		flex-direction: column;
	}

	.couponBox {
		width: 100%;
		height: 200rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
        margin-bottom: 20rpx;
		.couponInfo {
			margin: 15rpx;
			width: 100%;
			height: 100%;
			background-image: url('https://qykh.shopec.com.cn/image-server/dz/couponBg.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;

			.leftContent {
				width: 33%;
				height: 100%;
				.lefttext0 {
					font-size: 68rpx;
					font-weight: bold;
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
					color: #EC4863;
					&::after {
						content: '折';
						font-size: 24rpx;
					}
				}
				.lefttext1 {
					font-size: 68rpx;
					font-weight: bold;
					font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
					color: #EC4863;
					&::before {
						content: '¥';
						font-size: 24rpx;
						position: relative;
						top: -30rpx;
					}
				}

				.lefttext2 {
					font-size: 21rpx;
					font-weight: bold;
					text-align: center;
					color: #333333;
					margin: 13rpx 0;
				}

				.lefttext3 {
					font-size: 16rpx;
					text-align: left;
					color: #333333;
				}
			}

			.centerContent {
				width: 33%;
				height: 100%;

				.centertext1 {
					font-size: 26rpx;
					font-weight: bold;
					text-align: left;
					color: #EC4863;
					margin-top: 34rpx;
				}

				.centertext2 {
					font-size: 15rpx;
					text-align: left;
					color: #333333;
					margin-top: 10rpx;
				}

				.descContent {
					margin-top: 10rpx;
					.desc-title {
						font-size: 20rpx;
						font-weight: bold;
						text-align: left;
						color: #333333;
					}

					image {
						width: 18rpx;
						height: 18rpx;
						margin-left: 30rpx;
					}
				}

			}

			.rightContent {
				width: 34%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.type {
					width: 109rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #F24248;
					background-color: #FFFBEB;
					border-radius: 0 0 50% 50%;
					font-size: 22rpx;
				}

				.bizType {
					margin-top: 80rpx;
					width: 126rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					background: #F4F4F4;
					border-radius: 22rpx;
					font-size: 20rpx;
					color: #EC4863;
				}
				.memberCouponStatus {
					margin-top: 12upx;
					width: 112upx;
					height: 112upx;
					border: 1upx dashed #b0b0b0;
					border-radius: 56upx;
					font-size: 18upx;
					color: #A4A4A4;
					letter-spacing: 2upx;
					line-height: 112upx;
					align-self: center;
					text-align: center;
					font-weight: bold;
					transform:rotate(45deg);
					-webkit-transform:rotate(45deg);
					-moz-transform:rotate(45deg);
				}
			}
		}
	}

	.descBox {
		width: 94%;
		height: 174rpx;
		background: linear-gradient(to bottom, #e9e9e9, #ffffff);
		position: relative;
		left: 20rpx;
		right: 20rpx;
		top: -30rpx;
		display: flex;
        text {
			font-size: 20rpx;
			text-align: left;
			color: #666666;
		}
		.descInfo {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
		}
	}
</style>
